<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div th:fragment="left" class="col-sm-3 col-md-3 sidebar">

	<h4>Options</h4>

	<!-- Encoding -->
	<label class="navBarButtonLabel">Encoding</label>
	<div class="btn-group" id="encodingBtnGroup" role="group">
		<input type="radio" class="btn-check" name="encoding" id="encode-default" value="" />
		<label class="btn btn-outline-info" for="encode-default">(default)</label>

		<input type="radio" class="btn-check" name="encoding" id="encode-xml" value="xml" />
		<label class="btn btn-outline-info" for="encode-xml">XML</label>

		<input type="radio" class="btn-check" name="encoding" id="encode-json" value="json" />
		<label class="btn btn-outline-info" for="encode-json">JSON</label>
	</div>

	<!-- Pretty -->
	<br /> <label class="navBarButtonLabel">Pretty</label>
	<div role="group" class="btn-group" id="prettyBtnGroup" style="margin-top: 5px;">
		<input type="radio" class="btn-check" name="pretty" id="pretty-default" value="" />
		<label class="btn btn-outline-info" for="pretty-default">(default)</label>

		<input type="radio" class="btn-check" name="pretty" id="pretty-true" value="true" />
		<label class="btn btn-outline-info" for="pretty-true">On</label>

		<input
			type="radio" class="btn-check" name="pretty" id="pretty-false" value="false" />
		<label class="btn btn-outline-info" for="pretty-false"> Off</label>
	</div>

	<!-- Summary -->
	<br /> <label class="navBarButtonLabel">Summary</label>
	<div role="group" class="btn-group" id="summaryBtnGroup" style="margin-top: 5px;">
		<input type="radio" class="btn-check" name="_summary" id="summary-default" value="" />
		<label class="btn btn-outline-info" for="summary-default">(none)</label>

		<input type="radio" class="btn-check" name="_summary" id="summary-true" value="true" />
		<label class="btn btn-outline-info" for="summary-true">true</label>

		<input type="radio" class="btn-check" name="_summary" id="summary-text" value="text" />
		<label class="btn btn-outline-info" for="summary-text">text</label>

		<input type="radio" class="btn-check" name="_summary" id="summary-data" value="data" />
		<label class="btn btn-outline-info" for="summary-data">data</label>

		<input type="radio" class="btn-check" name="_summary" id="summary-count" value="count" />
		<label class="btn btn-outline-info" for="summary-count">count</label>
	</div>

	<script type="text/javascript" th:inline="javascript">
		
	$( document ).ready(function() {
		
		// Encoding buttons are wider, so set the shorter group to the same width
		// so that they wrap at the same time if the page is narrow
		$('#prettyBtnGroup').width($('#encodingBtnGroup').width());

		var encoding = [[${encoding}]];
		if (encoding == 'xml') {
				$('#encode-xml').trigger("click");
		} else if (encoding == 'json') {
				$('#encode-json').trigger("click");
		}

		var pretty = [[${pretty}]];
		if (pretty){
				$('#pretty-true').trigger("click");
		} else {
				$('#pretty-false').trigger("click");
		}

		var summary = [[${_summary}]];
		if (summary == 'true') {
				$('#summary-true').trigger("click");
		} else if (summary == 'text') {
				$('#summary-text').trigger("click");
		} else if (summary == 'data') {
				$('#summary-data').trigger("click");
		} else if (summary == 'count') {
				$('#summary-count').trigger("click");
		} else {
            $('#summary-default').trigger("click");
      }


		const hasResultBody = [[${!#strings.isEmpty(resultBody)}]];
		if (hasResultBody) {
			// When we're displaying a result page, the options buttons should
			// actually apply their values to the current search/action
			$('#encode-default').change(function(){
				if (hasResultBody)
					location.href=updateURLParameter(location.href, 'encoding', '');
			});
			$('#encode-xml').change(function(){
				location.href=updateURLParameter(location.href, 'encoding', 'xml');
			});
			$('#encode-json').change(function(){
				location.href=updateURLParameter(location.href, 'encoding', 'json');
			});

			$('#pretty-default').change(function(){
				location.href=updateURLParameter(location.href, 'pretty', '');
			});
			$('#pretty-true').change(function(){
				location.href=updateURLParameter(location.href, 'pretty', 'true');
			});
			$('#pretty-false').change(function(){
				location.href=updateURLParameter(location.href, 'pretty', 'false');
			});
		}
		
	});
	
	function doAction(source, action, resourceName) {
		var target = $(source);
		setResource(target, resourceName);
		
		$("#outerForm").attr("action", [[@{'/'}]] + action);
		$('#outerForm').submit();
	}
	</script>

	<h4>Server</h4>

	<ul class="nav flex-column nav-pills">
		<li class="nav-item">
			<a href="#" onclick="doAction(this, 'home', null);" class="nav-link" th:classappend="${page} == 'home' ? 'active' : ''">Server Home/Actions</a>
		</li>
      <li th:if="${supportsHfql}" class="nav-item">
         <a href="#" id="leftHfql" onclick="doAction(this, 'hfql', null);" class="nav-link" th:classappend="${page} == 'hfql' ? 'active' : ''">HFQL / SQL</a>
      </li>
	</ul>

	<h4>Resources</h4>
	
	<ul class="nav flex-column nav-pills" th:unless="${conf.rest.empty}">
		<th:block th:each="resource, resIterStat : ${conf.rest[0].resource}">
			<li class="nav-item">

				<a
               th:id="'leftResource' + ${resource.typeElement.valueAsString}"
               href="#"
               th:data1="${resource.typeElement.valueAsString}"
					class="nav-link"
					th:classappend="${resourceName} == ${resource.typeElement.valueAsString} ? 'active' : ''"
               onclick="doAction(this, 'resource', this.getAttribute('data1'));">
					<th:block th:text="${resource.typeElement.valueAsString}" >Patient</th:block>
					<span class="badge text-bg-secondary" th:if="${resourceCounts[resource.typeElement.valueAsString]} != null" th:text="${resourceCounts[resource.typeElement.valueAsString]}"/>
				</a>
			</li>
		</th:block>
	</ul>
	
	<input th:if="${resourceName.empty} == false" type="hidden" id="resource" name="resource" th:value="${resourceName}"/>

</div>


</html>
